<template>
    <view class="flex items-center rounded-full overflow-hidden">
        <l-button class="flex-1 rounded-none" v-if="isJspay" icon="rmb-circle" type="success" @tap="pay">支付</l-button>
        <l-button class="flex-1 rounded-none" icon="weixin-fill" type="primary" @tap="switchQrcode">二维码支付</l-button>
    </view>
    <u-popup :show="!isJspay" :round="10" mode="center" :closeable="true" :overlay="true" @close="switchQrcode"
        @open="open">
        <view>
            <l-qrcode :value="qrcode" size="300" :marginSize="6" style="margin: 0 auto;"></l-qrcode>
        </view>
    </u-popup>
    <view class="panel flex flex-col items-center relative" v-if="!isJspay && countdown > 0">

    </view>
</template>
<script setup lang="ts">
import Order from '@/stores/order'
import lQrcode from "@/uni_modules/l-qrcode/l-qrcode.vue";
import { ref } from "vue";

const props = defineProps<{
    loan_apply_id: number,
    is_ysf: number
}>();
const order = Order();
const qrcode = ref('');
let isJspay = ref(true);
const countdown = ref(0);

const startCountdown = () => {
    const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
            if (!isJspay) {
                getQrCode();
            }
            clearInterval(timer);
        }
    }, 1000);
};
const open = () => {

}

const switchQrcode = () => {
    isJspay.value = !(isJspay.value);
    if (countdown.value <= 0) {
        getQrCode()
    }
};

const getQrCode = () => {
    order.payQrcode({ loan_apply_id: props.loan_apply_id, is_ysf: props.is_ysf }).then((res: any) => {
        qrcode.value = res.native_info.code_url;
        countdown.value = 1800;
        startCountdown();
    });
}

const emit = defineEmits(['update']);

const pay = () => {
    order.pay({ loan_apply_id: props.loan_apply_id, is_ysf: props.is_ysf }).then(res => {
        uni.showToast({
            title: '支付成功',
            icon: 'success',
            mask: true
        });
        emit('update');
    });
};
</script>
